<template>
  <el-col :span="titleSpan">
    <span class="form-item-title">
      <span v-if="prop" class="validate-info">*</span>
      {{ title }}
      <el-tooltip v-if="help" class="item" effect="dark" :content="help" placement="bottom">
        <el-icon><QuestionFilled /></el-icon>
      </el-tooltip>
    </span>
  </el-col>
  <el-col :span="itemSpan">
    <el-form-item :prop="prop">
      <slot></slot>
    </el-form-item>
  </el-col>
</template>

<script setup lang="ts">
interface SelectFilterProps {
  prop?: String;
  title?: String;
  titleSpan?: number;
  itemSpan?: number;
  help?: String;
}

withDefaults(defineProps<SelectFilterProps>(), {
  title: () => "默认标题"
});
</script>

<style>
.el-form-item__content {
  margin-left: 0 !important;
  line-height: 24px;
}
</style>

<style scoped lang="scss">
.form-item-title {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding-right: 12px;
  font-size: 14px;
  text-align: right;
}
.validate-info {
  margin-right: 2px;
  color: red;
}
</style>
